revision:
<div class="spec">
<main id="carousel-container">
<ul id="carousel-1">
<li class="slide-1" id="audi"><img src="../images/car1.jpg" alt="Audi"/> </li>
<li class="slide-1" id="ferrari"><img src="../images/car2.jpg" alt="Ferrari" /></li>
<li class="slide-1" id="lamborghini"><img src="../images/car3.jpg" alt="Lamborghini" /></li>
<li class="slide-1" id="bmw"><img src="../images/car4.jpg" alt="BMW" /></li>
<li class="slide-1" id="mercedes"><img src="../images/car5.jpg" alt="Mercedes" /></li>
</ul>
</main>
<nav>
<a href="#audi">Audi</a>
<a href="#ferrari">Ferrari</a>
<a href="#lamborghini">Lamborghini</a>
<a href="#bmw">BMW</a>
<a href="#mercedes">Mercedes</a>
</nav>
</div>
<style>
#carousel-container {height: 40vw; width: 50vw; padding: 0; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; --slide-count: 5;margin: 0 auto; }
#carousel-1 { width: calc(100% * var(--slide-count)); display: flex; }
#carousel, .slide {height: 100%; list-style: none; margin: 0; padding: 0;}
.slide-1 {scroll-snap-align: start;}
.slide-1 > img {width: 100%; height: 100%; object-fit: cover;}
a { display: inline-block; margin: 0.25vw;}
nav {text-align: center; }
</style>
<main id="carousel-container-2">
<ul id="carousel-2">
<li class="slide-2" id="audi-2"><img src="../images/car1.jpg" alt="Audi"/> </li>
<li class="slide-2" id="ferrari-2"><img src="../images/car2.jpg" alt="Ferrari" /></li>
<li class="slide-2" id="lamborghini-2"><img src="../images/car3.jpg" alt="Lamborghini" /></li>
<li class="slide-2" id="bmw-2"><img src="../images/car4.jpg" alt="BMW" /></li>
<li class="slide-2" id="mercedes-2"><img src="../images/car5.jpg" alt="Mercedes" /></li>
</ul>
</main>
<nav id="nv-2">
<a href="#audi-2">Audi</a>
<a href="#ferrari-2">Ferrari</a>
<a href="#lamborghini-2">Lamborghini</a>
<a href="#bmw-2">BMW</a>
<a href="#mercedes-2">Mercedes</a>
</nav>
<style>
#carousel-container-2 {height: 40vw; width: 50vw; padding: 0; overflow: hidden; margin: 0 auto;}
#carousel-2 {position: relative;}
#carousel-2, .slide-2 {height: 100%;list-style: none; margin: 0; padding: 0;}
.slide-2 { width: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 300ms; }
.slide-2 > img { width: 100%; height: 100%; object-fit: cover;}
.slide-2:first-child, .slide-2:target { opacity: 1; }
.nv-2 a {display: inline-block; margin: 2vw; }
.nv-2 {text-align: center;}
</style>
<main id="carousel-container-3">
<ul id="carousel-3">
<li class="slide-3" id="audi-3"><img src="../images/car1.jpg" alt="Audi"/> </li>
<li class="slide-3" id="ferrari-3"><img src="../images/car2.jpg" alt="Ferrari" /></li>
<li class="slide-3" id="lamborghini-3"><img src="../images/car3.jpg" alt="Lamborghini" /></li>
<li class="slide-3" id="bmw-3"><img src="../images/car4.jpg" alt="BMW" /></li>
<li class="slide-3" id="mercedes-3"><img src="../images/car5.jpg" alt="Mercedes" /></li>
</ul>
</main>
<nav id="nv-3">
<a href="#audi-3">Audi</a>
<a href="#ferrari-3">Ferrari</a>
<a href="#lamborghini-3">Lamborghini</a>
<a href="#bmw-3">BMW</a>
<a href="#mercedes-3">Mercedes</a>
</nav>
<style>
#carousel-container-3 {height: 40vw; width: 50vw; padding: 0; margin: 0 auto;}
#carousel-3 {position: relative;}
#carousel-3, .slide-3 {height: 100%; list-style: none; margin: 0; padding: 0;}
.slide-3 { width: 100%; position: absolute; left: 0; top: 0; opacity: 0; transform: scale(0.5) rotate(-10deg); filter:
blur(2vw) brightness(0); transition: opacity 1s, transform 1s, filter 1s; pointer-events: none;}
.slide-3 > img {width: 100%; height: 100%; object-fit: cover;}
.slide-3:target { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) brightness(1);}
.slide-3:target ~ .slide-3 { opacity: 0; transform: scale(1.5) rotate(10deg); filter: blur(20px) brightness(2); }
.nv-3 a {display: inline-block; margin: 2vw; }
.nv-3 {text-align: center; }
</style>
<div class="spec">
<button id="but1">generate random picture</button>
<section class="flex"><img id="picture" src=""></section>
</div>
<style>
.flex {display: flex; margin: 0 auto; justify-content: center; align-items: center; width: 30vw; height:30vw; border:0.5vw inset burlywood;}
#but1{width: 5vw; margin-left:10vw; border:0.25vw solid green; color: black;}
.flex img { width: 30vw; height: 30vw;margin-left:-.5vw;}
</style>
<script>
const imageArray = ["../images/1a.jpg" , "../images/2a.jpg", "../images/3a.jpg", "../images/4a.jpg", "../images/5a.jpg" , "../images/6a.jpg", "../images/7a.jpg"];
const image = document.querySelector("#picture");
const button = document.querySelector("#but1");
window.onload = () => generateRandomPicture(imageArray);
button.addEventListener("click", () => generateRandomPicture(imageArray));
function generateRandomPicture(array){
let randomNum = Math.floor(Math.random() * array.length);
image.setAttribute("src", imageArray[randomNum]);
}
</script>
code:
<div class="gallery_A">
<img src="../images/1.jpg" alt="holiday">
<img src="../images/2.jpg" alt="holiday">
<img src="../images/3.jpg" alt="holiday">
<img src="../images/4.jpg" alt="holiday">
<img src="../images/5.jpg" alt="holiday">
</div>
<style>
/* number of images*/
.gallery_A {--d: 10s; /* duration */ display: grid; width: 220px; margin-left: 10vw;}
.gallery_A > img {grid-area: 1/1; width: 100%; aspect-ratio: 1; object-fit: cover;
border: 10px solid #f2f2f2; box-shadow: 0 0 4px #0007;
z-index: 2; animation: slide var(--d) infinite, z-order var(--d) infinite steps(1);}
.gallery_A img:last-child { animation-name: slide, z-order-last;}
.gallery_A > img:nth-child(1) {animation-delay: calc(0* var(--d));--r: -6deg;}
.gallery_A > img:nth-child(2) {animation-delay: calc(-0.2* var(--d)); --r: 5deg;}
.gallery_A > img:nth-child(3) {animation-delay: calc(-0.4* var(--d)); --r: 5deg;}
.gallery_A > img:nth-child(4) {animation-delay: calc(-0.6* var(--d)); --r: 11deg;}
.gallery_A > img:nth-child(5) {animation-delay: calc(-0.8* var(--d)); --r: -14deg; }
@keyframes slide {
10% {transform: translateX(120%) rotate(var(--r));}
0%, 100%, 20% {transform: translateX(0%) rotate(var(--r)); }
}
@keyframes z-order {
10%, 20% {z-index: 1;}
80% {z-index: 2;}
}
@keyframes z-order-last {
10%, 20% {z-index: 1;}
90% {z-index: 2;}
}
</style>